<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="FengYu">
    <title>Tz-34期Js</title>
    <style>
        *{margin:0;padding:0;font-family: Microsoft YaHei,serif;}
        li{list-style: none;}
        #wrap{
            position: relative;
            width: 780px;
            height: 330px;
            margin:50px auto;
        }
        .pic{
            width: 100%;
            height: 100%;
        }
        .pic ul{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .pic ul li{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .pic ul li.on{
            display: block;
        }
        .tab {
            position: absolute;
            left: 50%;
            bottom: 20px;
            width:125px;
            height: 21px;
            margin-left:-68px;
            background: rgba(255,255,255,.5);
            border-radius: 10px;
        }
        .tab ul li{
            float: left;
            width:15px;
            height: 15px;
            margin:3px 5px;
            background: #fff;
            border-radius: 50%;
            cursor:pointer;
        }
        .tab ul li.on{
            background: #f60;
        }
        /*模块二*/
        #box{
            position: relative;
            width: 310px;
            height: 180px;
            margin:0 auto;
        }
        #box .tab{
            bottom: 10px;
            width:150px;
            margin-left:-75px;

        }
        #box .btn{
            position: absolute;
            top: 50%;
            width:25px;
            height: 50px;
            margin-top:-25px;
            text-align: center;
            line-height:50px;
            font-weight: bold;
            color:#fff;
            background: rgba(0,0,0,.5);
            cursor: pointer;
        }
        #box .next{
            right: 0;
        }
    </style>
</head>
<body>
<!--模块一-->
<div id="wrap">
    <div class="pic">
        <ul>
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
        </ul>
    </div>
    <div class="tab">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<!--模块二-->
<div id="box">
    <div class="pic">
        <ul>
            <li class="on"><img src="img/01.jpg" alt=""></li>
            <li><img src="img/02.jpg" alt=""></li>
            <li><img src="img/03.jpg" alt=""></li>
            <li><img src="img/04.jpg" alt=""></li>
            <li><img src="img/05.jpg" alt=""></li>
            <li><img src="img/06.jpg" alt=""></li>
        </ul>
    </div>
    <div class="tab">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="btn prev">&lt;</div>
    <div class="btn next">&gt;</div>
</div>
<script>

    (function () {
        //父类
        function Wrap(){
            this.pLi = arguments[0];
            this.tLi = arguments[1];
            this.length = this.tLi.length;
            this.index = 0;
            this.init();
            this.tab();
        }
        
        //父类原型
        Wrap.prototype = {
            //初始化函数
            init : function () {
                this.pLi[0].className = "on";
                this.tLi[0].className = "on";
            },
            //改变index 同时把之前的名字去掉，把当前的加上on
            change : function (fn) {
                this.tLi[this.index].className = "";
                this.pLi[this.index].className = "";
                fn();   //改变this.index
                this.tLi[this.index].className = "on";
                this.pLi[this.index].className = "on";
            },
            tab : function () {
                var This = this;//存实例化对象
                for(var i=0;i<this.length;i++){
                    this.tLi[i].i=i;//存序号
                    this.tLi[i].onclick = function () {
                        var eIndex = this.i;//存当前点击的对象的序号
                        This.change(function () {
                            This.index = eIndex;
                        })
                    }
                }
            }
        };

        //子类
        function Box() {
            //私有属性继承
            Wrap.apply(this,[].slice.call(arguments));
            this.bLi = arguments[2];
            this.timer = null;
            this.box = arguments[3];
            this.btnClick();
            this.auto();
        }

        //子类的原型  继承父类Wrap的原型
        function Fn(){}
        Fn.prototype = Wrap.prototype;
        Box.prototype = new Fn();
        //子类原型的扩展
        Box.prototype.btnClick = function () {
            var This = this;//box的实例化对象
            for(var i=0;i<2;i++){
                this.bLi[i].i=i;//存左右按钮的序号
                this.bLi[i].onclick=function () {
                    var goudan = this.i;//存当前点击的按钮的序号
                    This.change(function () {
                        if(goudan){
                            This.index++;
                            This.index%=This.length;
                        }else{
                            This.index--;
                            if(This.index<0){This.index = This.length-1}
                        }
                    })
                }
                
            }
        };
        Box.prototype.auto = function () {
            var This = this;
            this.timer = setInterval(function () {
                This.change(function () {
                    This.index++;
                    This.index%=This.length;
                })
            },1000);
            this.box.onmouseenter=function () {
                clearInterval(This.timer)
            };
            this.box.onmouseleave=function () {
                This.auto()
            }
        };









        (function () {
            var oWrap = document.getElementById("wrap"),
                aPicLi = oWrap.querySelectorAll(".pic li"),
                aTabLi = oWrap.querySelectorAll(".tab li");
                new Wrap(aPicLi,aTabLi);
        })();

        (function () {
            var oBox = document.getElementById("box"),
                aPicLi = oBox.querySelectorAll(".pic li"),
                aTabLi = oBox.querySelectorAll(".tab li"),
                aBtnLi = oBox.querySelectorAll(".btn");
            new Box(aPicLi,aTabLi,aBtnLi,oBox);
        })()






















        /*
        var obj1 = new wrap();
        // obj1 = obj;
        console.log(obj1.__proto__);
        
        
        function wrap() {
            //里面的this它指向这个对象
            this.name = "fy"; // this === obj
            return obj;
        }
        
        obj1.sayhi();*/
        
        
    })()




</script>

</body>
</html>